import React, { startTransition, useEffect, useState } from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import '../css/address.css'
import axios from 'axios'

export default function Address() {
  const navigate = useNavigate()

  const [address, setaddress] = useState([])
  const right = (
    <div style={{ fontSize: 24 }}>
      <span style={{ color: '#c1ab96', fontSize: '1.5rem' }} onClick={() => {
        startTransition(() => {
          navigate('/addaddress')
        })
      }}>新增地址</span>
    </div>
  )
  const back = () => {
    startTransition(() => {
      navigate('/bttm/my')
    })
  }
  const getaddress = () => {
    axios.get('cxb/getaddress').then(res => {
      if (res.data.code === 200) {
        setaddress(res.data.data)
        console.log(res.data.data);

      }
    })
  }
  let defaultAddresses = address.filter(i => i.isDefault === true);
  var nonDefaultAddresses = address.filter(i => i.isDefault === false);
  useEffect(() => {
    // setTimeout(() => {
    //   getaddress()
    // }, 1000);
    getaddress()
  }, [])
  return (
    <div>
      <div className='cxb_address_top'>
        <NavBar right={right} onBack={back}>收货地址</NavBar>
      </div>
      {address.length === 0 && <p style={{ textAlign: 'center', marginTop: '2rem', color: '#ccc', fontWeight: 'bold' }}>暂无收货地址</p>}
      {address.length > 0 && <div className="cxb_address_content">
        {defaultAddresses && address.filter(i => i.isDefault === true).map(item => {
          return <div key={item._id} className='cxb_address_content_default'>
            <div className='cxb_address_content_default_left'>
              <span style={{ fontSize: '2rem', fontWeight: 'bold' }}>{item.name}</span>
              <span style={{ marginLeft: '2rem' }}>{item.phone}</span>
              <br /><br />
              <span style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>默认</span>
              <span style={{ marginLeft: '1rem' }}>{item.city}</span>
            </div>
            <div className='cxb_address_content_default_right' onClick={() => {
              startTransition(() => {
                navigate('/addaddress', { state: { _id: item._id, name: item.name, phone: item.phone, city: item.city.split(' ')[0], address: item.city.split(' ')[1], isDefault: item.isDefault } })
              })
            }}>编辑</div>
          </div>
        })}

        {nonDefaultAddresses && <div className='cxb_address_content_addressls'>
          {address.filter(i => i.isDefault === false).map(item => {
            return <div key={item._id} className='cxb_address_content_addressls_item'>
              <div className='cxb_address_content_addressls_item_left'>
                <span style={{ fontSize: '2rem', fontWeight: 'bold' }}>{item.name}</span>
                <span style={{ marginLeft: '2rem', color: '#bfc0ca' }}>{item.phone}</span>
                <br /><br />
                <span>{item.city}</span>
              </div>
              <div className='cxb_address_content_addressls_item_right' onClick={() => {
                startTransition(() => {
                  navigate('/addaddress', { state: { _id: item._id, name: item.name, phone: item.phone, city: item.city.split(' ')[0], address: item.city.split(' ')[1], isDefault: item.isDefault } })
                })
              }}>编辑</div>
            </div>
          })}
        </div>}
      </div>}
    </div>
  )
}
